<template>
  <div class="dashboard-container">
    <!-- 验证码 -->
    <el-form ref="smsForm" :model="loginForm" label-width="80px">
      <el-row :gutter="10">
        <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
          <el-form-item label="验证码：" prop="smsCode">
          <div style="display:flex;">
            <el-input v-model="loginForm.smsCode" placeholder="请输入验证码">
              <el-button
                slot="append"
                :disabled="time!==0"
                @click="getVerification"
              >
                {{ time === 0 ? '发送验证码' : `(${time}s)后发送` }}
              </el-button>
            </el-input>
          </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'Dashboard',
  data() {
    return {
      loginForm:{
        smsCode: '', // 验证码
      },
      time: 0, // 倒计时
      timer: -1, // 短信验证码倒计时
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  methods: {
    getVerification() {
      clearInterval(this.timer)
      this.time= 60
      this.timer = window.setInterval(() => {
        this.time--
        if (this.time === 0 ||this.time <= 0) {
          this.time = 0
          clearInterval(this.timer)
        }
      }, 1000)
    },
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
